<template>
    <div class="article-list defaultBg">
        <div v-loading="loading" v-if="loading" class="loading"></div>
        <my-table
            v-if="!loading"
            :tableColumns="tableColumns"
            :isInline="true"
            :tableList="articleList"
            :searchData="searchData"
            :searchButtonList="searchButtonList"
            :tableButtonList="tableButtonList"
            :count="articleListCount"
            @sizeChange="sizeChange"
            @pageChange="pageChange">
        </my-table>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getArticleList } from '@/api/article'
export default {
    name: 'article-list',
    computed: {
        ...mapGetters([
            'roleCode',
            'name',
            'account'
        ])
    },
    data () {
        return {
            // 搜索框的数据
            searchData: [
                { type: 'text', name: 'actTitle', label: '活动名称', value: '' },
                { type: 'select', name: 'actType', label: '活动类型', value: '', options: [{ id: 0, text: '活动' }, { id: 1, text: '比赛' }] },
                { type: 'text', name: 'organizerAccount', label: '创建人账号', value: '', labelWidth: '100' },
                { type: 'text', name: 'teacherAccount', label: '审批人账号', value: '', labelWidth: '100' },
                { type: 'select', name: 'approvalStatus', label: '审批状态', value: '', options: [{ id: 0, text: '未审批' }, { id: 1, text: '审批通过' }, { id: 2, text: '审批驳回' }] },
            ],
            // 搜索栏按钮
            searchButtonList: [
                {
                    id: 'search',
                    name: '查询',
                    type: 'primary',  // primary/warning/danger/success
                    icon: 'el-icon-search',
                    size: 'small',
                    click: (btnList, that) => {
                        // this 当前vue页面
                        // btnList 当前的 searchButtonList数组
                        // that mForm表单页面的this
                        this.getList(that.mform)
                    }
                },
                {
                    id: 'reset',
                    name: '重置',
                    type: '',  // primary/warning/danger/success
                    icon: 'el-icon-refresh-right',
                    size: 'small',
                    click: (btnList, that, parent) => {
                        // this 当前vue页面
                        // btnList 当前的 searchButtonList数组
                        // that mForm表单页面的this
                        this.getList()
                        that.$refs.mform.resetFields()
                    }
                }
            ],

            // 表格头
            tableColumns: [
                { name: 'actTitle', label: '活动名称', width: '230' },
                { name: 'actTypeDetail', label: '活动类型', width: '120' },
                { name: 'organizerName', label: '创建人账号', width: '140' },
                { name: 'teacherName', label: '审批人账号', width: '140' },
                { name: 'approvalStatusDetail', label: '审批状态', width: '140' },
                { name: 'startTime', label: '活动开始时间', },
                {
                    name: 'operation', label: '操作', align: "center",
                    /**
                     * @param {Object} h 渲染函数参数对象
                     * @param {Number} index 该行下角标
                     * @param {Object} row 所在行对象
                     * @param {Object} column 所在列对象
                     * @param {Object} scope 表格项对象
                    */
                    render: (h, index, row, column, scope) => {
                        return (
                            <span>
                                <el-button icon="el-icon-s-fold" size="small" type="primary" nativeOn-click={(e) => {
                                    this.$router.push(`/article/aticleDetail/${row.actId}/1`)
                                    e.stopPropagation() // 阻止事件冒泡，避免表格行被选中
                                }}>活动详细</el-button>

                                <el-button icon="el-icon-check" v-show={
                                    (
                                        this.roleCode === 'super_admin' ||
                                        this.roleCode === 'admin'
                                    ) && row.approvalStatus === 0
                                } size="small" type="success" nativeOn-click={(e) => {
                                    this.$router.push(`/article/aticleDetail/${row.actId}/0`)
                                    e.stopPropagation() // 阻止事件冒泡，避免表格行被选中
                                }}>活动审批</el-button>
                            </span>
                        )
                    },
                }
            ],
            // 表格按钮
            tableButtonList: [
                {
                    id: 'add',
                    name: '新增活动',
                    type: 'primary',  // primary/warning/danger/success
                    icon: 'el-icon-plus',
                    size: 'small',
                    loading: false, // 若按钮点击时需要loading效果，则放开注释
                    click: (btnList, that) => {
                        // this 当前vue页面
                        // btnList 当前的 searchButtonList数组
                        // that mForm表单页面的this
                        this.loading = true
                        this.$router.push('/article/articleAdd')
                        this.loading = false
                    }
                }
            ],
            // 表格内容
            articleList: [],
            // 表格长度
            articleListCount: 0,
            // 列表数据是否准备完
            loading: true,
            // 当前页码
            offect: 1,
            // 当前列表显示条数
            limit: 10,
        }
    },
    watch: {
        roleCode: {
            handler (val, oldVal) {
                if (val === 'teacher') {
                    this.tableButtonList = []
                } else {

                }
            },
            immediate: true
        }
    },
    methods: {
        async getList (searchData = {}) {
            searchData.limit = this.limit
            searchData.offect = this.offect
            const { data } = await getArticleList(searchData)
            this.articleList = data.resList
            this.articleListCount = data.count
            this.loading = false
        },
        sizeChange (limit) {
            this.limit = limit
            this.getList()
        },
        pageChange (offect) {
            this.offect = offect
            this.getList()
        }
    },
    created () {
        this.getList()
    },
    mounted () { }
}
</script>

<style lang="scss" scoped>
.loading {
    width: 100%;
    height: 100%;
}
</style>